<template>
    <div class="mainCenter">
        <div class="title">座位类型管理</div>
        <div class="mainCenterBox">
            <div class="searchBox">
                <el-form>
                    <el-form-item>
                        <el-input type="text" placeholder="座位编号" v-model="keyWord.str"></el-input>
                    </el-form-item>
                    <el-form-item style="width: 120px;margin-left: 20px;">
                        <el-select placeholder="选择楼层" v-model="keyWord.fid">
                            <el-option :value="-1" :label="'全部'"></el-option>
                            <el-option v-for="item in seatData.floorList" :label="item.floor" :value="item.fid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width: 120px;margin-left: 20px;">
                        <el-select placeholder="选择状态" v-model="keyWord.state">
                            <el-option :value="-1" :label="'全部'"></el-option>
                            <el-option :value="0" :label="'维护'"></el-option>
                            <el-option :value="1" :label="'正常'"></el-option>
                            <el-option :value="2" :label="'废弃'"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="width: 120px;margin-left: 20px;">
                        <el-select placeholder="选择类型" v-model="keyWord.seattype">
                            <el-option :value="-1" :label="'全部'"></el-option>
                            <el-option v-for="item in seatData.typeseatList" :label="item.type" :value="item.typeid"></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item >
                        <el-button type="primary" @click="search"><el-icon>
                                <Search />
                            </el-icon>查询</el-button>
                    </el-form-item>
                </el-form>
                <div class="addInfo">
                    <el-button type="primary" @click="addSeat"><el-icon>
                            <Plus />
                        </el-icon>添加座位类型</el-button>
                </div>
            </div>
            <el-table style="width: 100%" stripe border :data="seatData.seatList">
                <el-table-column label="座位编号" prop="seatid" />
                <el-table-column prop="typeseatList.type" label="座位类型" />
                <el-table-column prop="seataddress" label="座位位置" />
                <el-table-column prop="usecount" label="座位使用次数" />
                <el-table-column prop="state" label="座位状态">
                    <template #default="scope">
                        <p v-if="scope.row.state==0" style="color: #409eff;">维护</p>
                        <p v-if="scope.row.state==1" style="color:#4ee617;">正常</p>
                        <p v-if="scope.row.state==2" style="color: #f64358;">废除</p>
                    </template>
                </el-table-column>
                <el-table-column  label="操作">
                    <template #default="scope">
                        <el-button type="primary" plain size="small" @click="editSeat(scope.$index,scope.row)"><el-icon>
                                <EditPen />
                            </el-icon>编辑</el-button>
                        <el-button type="danger" plain size="small" @click="deleteSeat(scope.$index,scope.row)"><el-icon>
                                <Delete />
                            </el-icon>删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination background layout="total, sizes, prev, pager, next" :page-sizes="[5, 10]" :total="pagetions.count"
                style="float: right;margin-top: 20px;" v-model:page-size="pagetions.num" v-model:current-page="pagetions.page"
                @size-change="pagetions.changeLimit" @current-change="pagetions.jumpPage" />
        </div>
        
        <el-drawer v-model="seatData.isChange" :title="'图书操作'" direction="btt" size="500">
               <EditSeat :seatOne="seatData.seatOne" @emit-change="changeData" @emit-add="addData"></EditSeat>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import { reqDeleteSeat, reqGetFloorList, reqGetSeatList, reqGetSeatTypeList, reqSearchSeatList } from '@/api/common';
import { Seat, SeatType } from '@/types/seat';
import { elementConfirm, tip } from '@/utils/alert';
import { onMounted, reactive } from 'vue';
import EditSeat from './components/EditSeat.vue';
import { FloorType } from '@/types/floor';
const seatData=reactive<{seatList:Seat[],isChange:boolean,isSearch:boolean,seatOne:Seat|null,index:number,floorList:FloorType[],typeseatList:SeatType[]}>({
    seatList:[],
    isChange:true,
    isSearch:false,
    seatOne:null,
    index:-1,
    floorList:[],
    typeseatList:[]
})
const keyWord=reactive({
    str:'',
    fid:-1,
    state:-1,
    seattype:-1
})
const pagetions=reactive({
    count:0,
    page:1,
    num:5,
    jumpPage(page:number){
        pagetions.page=page
        seatData.isSearch?searchSeatList():getSeatList()
    },
    changeLimit(num:number){
        pagetions.num=num
       seatData.isSearch?searchSeatList():getSeatList()
    }
})

const changeData=(value:any)=>{
    seatData.seatList[seatData.index]=value.info
    seatData.isChange=value.bool
}

const addData=(value:any)=>{
    seatData.isChange=value
    getSeatList()
}

const getSeatList=async()=>{
    let res=await reqGetSeatList(pagetions.num,pagetions.page)
    seatData.seatList=res.data.data.data
    pagetions.count=res.data.data.count
}

const search=()=>{
    pagetions.page=1
    seatData.isSearch=true
    console.log(keyWord);
    searchSeatList()
}

const searchSeatList=async()=>{
    let res=await reqSearchSeatList(keyWord.str,keyWord.fid,keyWord.state,keyWord.seattype,pagetions.num,pagetions.page)
    seatData.seatList=res.data.data.data
    console.log(res);
    
    pagetions.count=res.data.data.count
}

const addSeat=()=>{
    seatData.seatOne=null,
    seatData.isChange=true
}

const editSeat=(idx:number,info:Seat)=>{
    seatData.seatOne=info
    seatData.isChange=true
    seatData.index=idx
}

const deleteSeat=(idx:number,info:Seat)=>{
    elementConfirm().then(()=>{
        reqDeleteSeat(info).then(res=>{
            tip(res.data.info,'success')
            getSeatList()
        })
        console.log("删除");
    })
}

const getFlooList=async()=>{
    let res=await reqGetFloorList()
    seatData.floorList=res.data.data
}

const getTypeseatList=async()=>{
    let res=await reqGetSeatTypeList(50,1)
    seatData.typeseatList=res.data.data.data
}

onMounted(()=>{
    seatData.isChange=false
    getFlooList()
    getSeatList()
    getTypeseatList()
})

</script>

<style scoped lang="scss">
:deep(.el-drawer) {
    border-radius: 5px;
    width: 800px;
    position: absolute;
    left: 50%;
    margin-left: -400px;
    top: 50%;
    margin-top: -250px;
    display: flex;
    justify-content: center;

}

:deep(.el-drawer__header) {
    margin-bottom: 12px;
    ;
}
:deep(.el-drawer__body){
    display: flex;
    justify-content: center;
}
</style>